
<script setup>
import { ref } from 'vue';
import Logo from "@/components/Header/Logo.vue";
import UnorderedListofLinks from "@/components/List/UnorderedListofLinks.vue";
import BaseButton from "@/components/Form/buttons/BaseButton.vue";

const isMobileMenuHidden = ref(true);

const toggleMobileMenu = () => {
  isMobileMenuHidden.value = !isMobileMenuHidden.value;
};
</script>

<template>
  <header>
    <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
      <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
        <Logo :image-src="'https://flowbite.com/docs/images/logo.svg'" :link="'/'" />
        <div class="flex items-center lg:order-2">
          <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a>
          <BaseButton :text="'注册'" class="bg-gray-700 py-3 px-4"/>
          <button
              @click="toggleMobileMenu"
              data-collapse-toggle="mobile-menu-2"
              type="button"
              class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
              aria-controls="mobile-menu-2"
              :aria-expanded="!isMobileMenuHidden"
          >
            <span class="sr-only">Open main menu</span>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
            <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
        <div
            :class="{ 'hidden': isMobileMenuHidden }"
            class="justify-between items-center w-full lg:flex lg:w-auto lg:order-1"
            id="mobile-menu-2"
        >
          <UnorderedListofLinks />
        </div>
      </div>
    </nav>
  </header>
</template>

<style scoped>
</style>
